<template>
  <div>
    <div style="margin-top: 30px">

    </div>

    <el-row >
      <el-col :span="3" :offset="20">
        <el-button type="primary" @click="addMerchant" >
          新增商户
        </el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col
        :span="5"
        v-for="merchant in merchants"
        :key="merchant.id"
        :offset="1"
        style="margin-left: 5px"
      >
        <el-card :body-style="{ padding: '10px', height:'220px'}" shadow="hover" style="height: 200px; margin-bottom: 15px">
          <div style="padding: 6px;height: 120px">
            <p class="title">{{merchant.name}}</p>
            <img :src="merchant.logo" class="image">

          </div>
          <div style="height: 40px; float: bottom">
            <el-button type="text" @click="del(merchant)" class="button">删除</el-button>
            <el-button type="text" @click="edit(merchant)" class="button">编辑</el-button>
          </div>
        </el-card>
      </el-col>


    </el-row>

  </div>

</template>

<script>


  export default {
    name: 'MerchantList',
    data(){
      return{
        merchants:[]
      }
    },

    mounted() {
      this.loadList()
    },
    methods: {

      edit(boardInfo){
        this.$router.push({
          name:'addMerchant',
          query:{
            merchantId:boardInfo.id
          }
        })
      },
      del(merchant){
        return this.$confirm("是否确定删除此榜单？").then(() => {

          this.getAxios('merchant/delete',{
            id:merchant.id
          }).then(res => {
            this.$message({
              type:'success',
              message:'删除成功'
            });
            this.merchants.rmove(merchant)
          }).catch(error => {
            this.$message({
              type:'info',
              message:error.msg
            });
          })
        }).catch(error =>{

        })
      },
      loadList(){
        this.postAxios('merchant/pageList',{

        }).then(res => {
          let data = res.data
          this.merchants = data
        }).catch(error => {
          this.$message({
            type:'info',
            message:error.msg
          })
        })
      },

      addMerchant(){
        this.$router.push({
          name:'addMerchant'
        })
      }

    }
  }
</script>

<style scoped>

  .title{
    margin-top: 0px;
    margin-bottom: 0px;
    height: 30px;
  }
  .image {
    width: 100%;
    display: block;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }

</style>
